<template>
  <div class="app-page">
    <div class="li">
      <div class="name">06首付款确认函-经销商.pdf <span class="tag">电子签署</span></div>
      <div class="state">签约完成</div>
      <div class="info">
        <span>签罢客户名称：<i>住木斯市凯达农业装备有限公司</i></span>
        <span>签署方：<i>经销商</i></span>
        <span>签署办理人：<i>于欢欢</i></span>
        <span>办理人手机号码：<i>15145028352</i></span>
        <span>办理人证件号：<i>232331199310151629</i></span>
        <span>签署时间：<i>2024-09-24 14:00:06</i></span>
        <span>手机号码验证状态：<i>验证通过</i></span>
      </div>
    </div>
    <div class="li">
      <div class="name">06首付款确认函-经销商.pdf <span class="tag">电子签署</span></div>
      <div class="state">签约完成</div>
      <div class="info">
        <span>签罢客户名称：<i>住木斯市凯达农业装备有限公司</i></span>
        <span>签署方：<i>经销商</i></span>
        <span>签署办理人：<i>于欢欢</i></span>
        <span>办理人手机号码：<i>15145028352</i></span>
        <span>办理人证件号：<i>232331199310151629</i></span>
        <span>签署时间：<i>2024-09-24 14:00:06</i></span>
        <span>手机号码验证状态：<i>验证通过</i></span>
      </div>
    </div>
    <div class="li">
      <div class="name">06首付款确认函-经销商.pdf <span class="tag">电子签署</span></div>
      <div class="state">签约完成</div>
      <div class="info">
        <span>签罢客户名称：<i>住木斯市凯达农业装备有限公司</i></span>
        <span>签署方：<i>经销商</i></span>
        <span>签署办理人：<i>于欢欢</i></span>
        <span>办理人手机号码：<i>15145028352</i></span>
        <span>办理人证件号：<i>232331199310151629</i></span>
        <span>签署时间：<i>2024-09-24 14:00:06</i></span>
        <span>手机号码验证状态：<i>验证通过</i></span>
      </div>
    </div>
  </div>
</template>

<script>
  import { reactive, ref, onBeforeMount, onMounted } from 'vue';
</script>
<style scoped lang="less">
  .app-page {
    padding: 24rem 20rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    .li {
      width: 918rem;
      background: #ffffff;
      border-radius: 26rem;
      padding: 28rem 34rem 0;
      margin-right: 20rem;
      margin-bottom: 20rem;
      position: relative;
      &:nth-child(2n) {
        margin-right: 0;
      }
      .name {
        font-family: Microsoft YaHei;
        font-size: 30rem;
        color: #000000;
        margin-bottom: 37rem;
        .tag {
          width: 67rem;
          height: 23rem;
          font-family: SimSun;
          font-size: 12rem;
          color: #ffffff;
          background: #f29e6a;
        }
      }
      .state {
        font-family: Microsoft YaHei;
        font-size: 24rem;
        color: #39bb66;
        position: absolute;
        top: 31rem;
        right: 29rem;
      }
      .info {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        span {
          display: inline-block;
          font-family: SimSun;
          font-size: 14rem;
          color: #888888;
          margin-bottom: 26rem;
          margin-right: 32rem;
          i {
            color: #000000;
            font-style: normal;
          }
        }
      }
    }
  }
</style>
